import MicroApps from '@/micro/apps';
import { useGlobalStore } from '@/store';
import { useSocket } from '@ac/hooks';
import { registerMicroApps, start } from 'qiankun';
import { useEffect, type PropsWithChildren, type ReactElement } from 'react';

/**
 * 微应用加载器
 * @description 注册并启动微应用
 * @param {PropsWithChildren} props 组件属性
 * @returns {ReactElement}
 */
const MicroAppLoader = ({ children }: PropsWithChildren): ReactElement => {
	const socket = useSocket();
	useEffect(() => {
		if (socket.socketId) {
			const apps = MicroApps.map(app => {
				return {
					...app,
					props: {
						socket,
						useGlobalStore
					}
				};
			});
			registerMicroApps(apps);
			start({ sandbox: { experimentalStyleIsolation: true } });
		}
	}, [socket]);

	return <>{children}</>;
};
export default MicroAppLoader;
